#sidebar { top: 15vh}

#avator {
    width: 60%;
    height: auto;
}

@media screen and (min-device-width: 768px) {
    #content { min-height: 100vh; }
}

[data-toggle="collapse"].collapsed .mi.collapse-icon:before { content: "\EAC6"; }

[data-toggle="collapse"] .mi.collapse-icon:before { content: "\EAC0"; }

#background { background-color: #FAF9F8; }

.toolbar {
    width: 50px !important;
    height: 50px
}

.mi:hover { margin-left: 0 !important; }

.mi-lg {
    font-size: 1.33333333em !important;
    line-height: 0.75em !important;
    vertical-align: -30% !important
}

.mi-2x { font-size: 2em !important }

.text-white { color: #fff !important; }

.bg-gray {
    background-color: #8f8f8f !important;
    border-color: #8f8f8f !important;
}

.square { border-radius: 0; }

.blockquote { font-size: 1rem; }

.medium-small { font-size: 0.9rem !important }

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-weight: bold !important; }

.donate-qrcode {
    width: 80%;
    max-width: 300px;
    height: auto;
}

.friend-introduce { height: 50px; }

.view {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
    overflow: hidden;
}